<template>
    <div class="comp" ref="add">
        <!-- 放置图表的位置 -->
        <!-- <h1>我是图表组件</h1> -->

    </div>
</template>

<script  setup>
// 引入基础模块
// import { defineComponent, reactive } from 'vue'
import { ref, inject, onMounted } from 'vue'
const echarts = inject('echarts')
const api = inject('api')
//初始化数据
let add = ref(null)
let ying = null
let allData = []
function add1() {
    ying = echarts.init(add.value, 'pink')
    let init1 = {
        title: {
            text: '你二大爷'
        },
        xAxis: {
            type: 'category',
            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                // data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar'
            }
        ]
    }
    ying.setOption(init1)

}
async function add2() {
    let { data } = await api('plantingHarvest')
    allData=data
    console.log(allData);
    add3()
}
function add3(){
    let add4={
        xAxis: {
            type: 'category',
            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            data:allData.map(item=>item.month)
        },
        series: [
            {
                // data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar',
                data:allData.map(item=>item.harvest)
            }
        ]
    }
    ying.setOption(add4)
}
onMounted(() => {
    add1()
    add2()
    // add3()
})
</script>
   
   
<style scoped></style>